{% extends "Cart/base.html" %}

{% block title %}显示订单{% endblock %}

{% block file %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
    <script type="text/javascript" src="{{ url_for('static',filename='js/jquery-3.6.0.min.js') }}"></script>
    <script src="{{ url_for('static',filename='css/folder/holder.js') }}"></script>
    <link href="{{ url_for('static',filename='css/folder/bootstrap.css') }}" rel="stylesheet" type="text/css">
    <script src="{{ url_for('static',filename='css/folder/jquery-1.9.1.min.js') }}"></script>
    <script src="{{ url_for('static',filename='css/folder/bootstrap.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/module.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/Cart/1.css') }}">
{% endblock %}

{% block body %}
<!--显示订单详情-->
<div id="allorder" class="col-md-10" style="margin-left: 245px;margin-top: 10px">
    <div style="height: 20px;width: 100%">
        <a style="font-size: 15px;text-decoration: none;color: black" href="{{ url_for("index.index") }}">首页</a>&nbsp;
        <span style="font-size: 18px">/</span>&nbsp;
        <a href="showOrder.html" style="font-size: 15px;text-decoration: none;color: black">订单</a>
    </div>
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this" id="allorder">所有订单</li>
            <li>待付款</li>
            <li>待发货</li>
            <li>待收货</li>
            <li>待评价</li>
            <li>已完成</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show" >
                <div id="order-list-0" class="panel panel-default" style="width: 900px;border-color: white;background-color: rgb(245,245,245);"></div>
            </div>
            <div class="layui-tab-item" >
                <div id="order-list-1" class="panel panel-default" style="width: 900px;border-color: white;background-color: rgb(245,245,245)"></div>
            </div>
            <div class="layui-tab-item" >
                <div id="order-list-2" class="panel panel-default" style="width: 900px;border-color: white;background-color: rgb(245,245,245)"></div>
            </div>
            <div class="layui-tab-item" >
                <div id="order-list-3" class="panel panel-default" style="width: 900px;border-color: white;background-color: rgb(245,245,245)"></div>
            </div>
            <div class="layui-tab-item" >
                <div id="order-list-4" class="panel panel-default" style="width: 900px;border-color: white;background-color: rgb(245,245,245)"></div>
            </div>
            <div class="layui-tab-item">
                <div id="order-list-5" class="panel panel-default" style="width: 900px;border-color: white;background-color: rgb(245,245,245)"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    layui.use('element', function(){
        var element = layui.element;

        //点击不同tab显示不同商品
        element.on('tab(docDemoTabBrief)', function(data){
            console.log(data.index); // 得到当前 tab 项的所在下标
            $.ajax({
                url:"/product/orders/status/"+(data.index-1),
                type:"post",
                dataType:"json",
                success:function (json) {
                    if(json.state==200){
                        let list=json.data;
                        console.log(list);
                        if(list.length==0){
                            document.getElementById("order-list-"+data.index).style.backgroundImage="url('../../static/image/背景.png')";
                            document.getElementById("order-list-"+data.index).style.height="280px";
                        }else {
                            $("#order-list-"+data.index).empty();
                            document.getElementById("order-list-"+data.index).style.backgroundImage="";
                            for(let i=0;i<list.length;i++){
                                var str2=showstatus(list[i].status,list[i].total_price,list[i].oid);
                                var item="";
                                for(let j=0;j<list[i].orderItem.length;j++){
                                    let substr="<tr>"+
                                        "<td style=\"width: 65px;height: 85px\"><img style=\"width: 60px;height: 80px\" src=\"../../static/image/detail/#{image}.png\" class=\"img-responsive\" /></td>"+
                                        "<td>#{title}</td>"+
                                        "<td>¥<span>#{price}</span></td>"+
                                        "<td>#{num}件</td>"+
                                        "<td>¥<span>#{totalprice}</span></td>"
                                    "</tr>";
                                    substr=substr.replace(/#{image}/,list[i].orderItem[j].title.split('-')[0]);
                                    substr=substr.replace(/#{title}/,list[i].orderItem[j].title);
                                    substr=substr.replace(/#{price}/,list[i].orderItem[j].price);
                                    substr=substr.replace(/#{num}/,list[i].orderItem[j].num);
                                    substr=substr.replace(/#{totalprice}/,list[i].orderItem[j].num*list[i].orderItem[j].price);
                                    item+=substr;
                                }
                                let str= "<div class=\"panel-heading\" style='border: 1px solid;background-color: white'>"+
                                    "<p class=\"panel-title\">"+
                                    "订单号：100100<span>#{oid}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;下单时间：<span>#{ordertime}</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;收货人：<span>#{recvname}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;收货地址：<span>#{recvAddress}</span>"+
                                    "</p>"+
                                    "</div>"+
                                    "<div class=\"panel-body\" style='border: 1px solid;background-color: white'>"+
                                    "<table class=\"orders-table\" width=\"100%\" style='height: 122px'>"+
                                    "<thead>"+
                                    "<tr>"+
                                    "<th width=\"10%\"></th>"+
                                    "<th width=\"25%\">商品</th>"+
                                    "<th width=\"25%\">单价</th>"+
                                    "<th width=\"20%\">数量</th>"+
                                    "<th width=\"30%\">小计</th>"+
                                    "</tr>"+
                                    "</thead>"+
                                    "<tbody id='orderlist-#{i}' class=\"orders-body\" style='height: 100px'>"+item+
                                    "</tbody>"+
                                    "</table>"+
                                    "<div id='shows1-#{oid2}-#{cid}' style='margin-top: 5px'>"+str2+
                                    "</div>"+
                                    "</div><br><br>";
                                str=str.replace(/#{i}/,i);
                                str=str.replace(/#{oid2}/,list[i].oid);
                                str=str.replace(/#{oid}/,list[i].oid);
                                {#str=str.replace(/#{oid1}/,list[i].oid);#}
                                str=str.replace(/#{ordertime}/,timeChange(list[i].order_time));
                                str=str.replace(/#{recvname}/,list[i].recv_name);
                                str=str.replace(/#{recvAddress}/,list[i].recv_address);
                                $("#order-list-"+data.index).append(str);
                            }
                        }
                    }
                }
            });
        });
    });
</script>
<!--时间转换-->
<script type="text/javascript">
    function timeChange(UTCDateString){
        if (!UTCDateString) {
            return '-';
        }
        function formatFunc(str) {
            return str > 9 ? str : '0' + str
        }
        let date2 = new Date(UTCDateString);
        {#console.log('时间', date2)#}
        let year = date2.getFullYear();
        let mon = formatFunc(date2.getMonth() + 1);
        let day = formatFunc(date2.getDate());
        let hour = date2.getHours();
        hour = hour >= 12 ? hour : hour; // 24小时制
        hour = formatFunc(hour);
        let min = formatFunc(date2.getMinutes());
        let sec = formatFunc(date2.getSeconds());
        let dateStr = year + '年' + mon + '月' + day + '日 ' + hour + ':' + min;
        return dateStr;
    }
</script>
<script>
    window.onload=function () {
        buttons=document.getElementsByClassName("dpj-class");
        console.log(buttons)
        for(let i=0;i<buttons.length;i++){
            buttons[i].onclick=function (event){
                alert(event.target.id)
            }
        }
    }
</script>
<!--显示订单-->
<script type="text/javascript">
    function showstatus(status,price,oid){
        let str2="";
        if(status==1){
            str2="<span style='font-size: 18px;font-weight: bold;color: red'>待发货</span>"+
                "<span style='margin-left: 710px;font-weight: bold;font-size: 16px'>实付款：#{totalprice}</span>";
            str2=str2.replace(/#{totalprice}/,price);
        }else if(status==0){
            str2="<span style='font-size: 18px;font-weight: bold;color: red'>待付款</span>"+
                "<button onclick='dpkTOdfh(#{oid},1)' ' id='#{oid}' type='button' style='margin-left: 15px;height: 25px;line-height: 25px' class=\"wzf-class layui-btn layui-btn-sm layui-btn-normal\">点击支付</button>"+
                "<span style='margin-left: 630px;font-weight: bold;font-size: 16px'>实付款：#{totalprice}</span>";
            str2=str2.replace(/#{totalprice}/,price);
            str2=str2.replace(/#{oid}/,oid);
        }else if(status==2){
            str2="<span style='font-size: 18px;font-weight: bold;color: red'>待收货</span>"+
                "<button onclick='dshTOdpj(#{oid},3)' id='#{oid}' type='button' style='margin-left: 15px;height: 25px;line-height: 25px' class=\"dsh-class layui-btn layui-btn-sm layui-btn-normal\">点击确认</button>"+
                "<span style='margin-left: 630px;font-weight: bold;font-size: 16px'>实付款：#{totalprice}</span>";
            str2=str2.replace(/#{totalprice}/,price);
            str2=str2.replace(/#{oid}/,oid);
        }else if(status==3){
            str2="<span style='font-size: 18px;font-weight: bold;color: red'>待评价</span>"+
                "<button onclick='dpjTOywc(#{oid},4)' id='#{oid}' type='button' style='margin-left: 15px;height: 25px;line-height: 25px' class=\"dpj-class layui-btn layui-btn-sm layui-btn-normal\">点击评价</button>"+
                "<span style='margin-left: 630px;font-weight: bold;font-size: 16px'>实付款：#{totalprice}</span>";
            str2=str2.replace(/#{totalprice}/,price);
            str2=str2.replace(/#{oid}/,oid);
        }else if(status==4){
            str2="<span style='font-size: 18px;font-weight: bold;color: red'>已完成</span>"+
                "<span style='margin-left: 710px;font-weight: bold;font-size: 16px'>实付款：#{totalprice}</span>";
            str2=str2.replace(/#{totalprice}/,price);
        }
        return str2;
    }

    //待付款->待发货
    function dpkTOdfh(oid,status){
        $.ajax({
            url:"/product/selectorder/"+oid,
            success:function (res) {
                console.log(res);
                var url="{{ url_for('product.payment') }}?total_price="+res.data.total_price+"&order_time="+res.data.order_time+
                    "&recv_name="+res.data.recv_name+"&oid="+res.data.oid;
                location.href=url;
            }
        })
    }

    //待收货->待评价
    function dshTOdpj(oid,status){
        $.ajax({
            url:"/admin/changestatus",
            data:{'oid':oid,'booksort':status},
            success:function (res){
                if(res.state==200){
                    layer.msg("商品已收到！",{
                        icon: 1,
                        time: 1000
                    },function (){
                        location.reload();
                    });
                }
            }
        })
    }

    //待评价->已完成
    function dpjTOywc(oid,status) {
        var url="{{ url_for('product.comment') }}?oid="+oid;
        location.href=url;
    }

    /*显示订单的商品信息*/
    function showorderInfo(cid,oid) {
        $.ajax({
            url: "/product/orders/orderinfo/"+oid,
            dataType: "json",
            type: "post",
            success:function (json) {
                if(json.state==200){
                    let list=json.data;
                    for(let i=0;i<list.length;i++){
                        let substr="<tr>"+
                            "<td style=\"width: 65px;height: 85px\"><img style=\"width: 60px;height: 80px\" src=\"../../static/image/detail/#{image}.png\" class=\"img-responsive\" /></td>"+
                            "<td>#{title}</td>"+
                            "<td>¥<span>#{price}</span></td>"+
                            "<td>#{num}件</td>"+
                            "<td>¥<span>#{totalprice}</span></td>"
                            "</tr>";
                        substr=substr.replace(/#{image}/,list[i].title.split('-')[0]);
                        substr=substr.replace(/#{title}/,list[i].title);
                        substr=substr.replace(/#{price}/,list[i].price);
                        substr=substr.replace(/#{num}/,list[i].num);
                        substr=substr.replace(/#{totalprice}/,list[i].num*list[i].price);
                        $("#orderlist-"+oid+"-"+cid).append(substr);
                    }
                }
            }
        });
    }
</script>
{% endblock %}